<!doctype html>

<html>
<head>
	<title>Ular</title>

	<meta charset="utf-8">
	<style type="text/css">
		#wrap {
			width: 600px;
			height: 200px;
			border: 1px solid gray;
			position: relative;
			margin: 50px auto;
			font-size: 14px;
			font-family: Georgia, Arial;
		}

		#ular {
			width: 20px;
			height: 20px;
			background: gray;
			position: absolute;
		}

		#mulai {
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(128,0,128,0.2);
			text-align: center;
			z-index: 999;
			font-size: 300%;
		}

		#mulai span {
			cursor: pointer;
			background: rgb(128, 0, 128);
			padding: 15px 50px;
			border-radius: 20px;
			color: white;
			position: relative;
			top: 70px;
		}

		#mulai span:hover {
			box-shadow: 0px 0px 2px rgba(128,0,128, 0.4);
			background: rgba(128,0,128,0.9);
		}

		#mulai span:active {
			box-shadow: none;
			background: rgba(128,0,128,1);
			
		}
	</style>

</head>
<body>
<div id="wrap">
	<div id="mulai"><span>Mulai</span></div>
	<div id="ular"><span id="mulut"></span></div>
</div>
	<script type="text/javascript">
		/*
			Muter-muter
			panembahan satyapradana @ klikedukasi.com
			28 Februari 2015
		*/
		var area = document.getElementById('mulai');
		var sbj = document.getElementById('ular');
		var nKanan = 0,
			nKiri = 0,
			nTurun = 0,
			nNaik =0;
		var jm = 1;


		var jalan = function() {
			function mulai() {
				area.style.display = 'none';
				nKanan++;
				sbj.style.left = nKanan + 'px';
				if(nKanan >= 580) {
					sbj.style.left = '580px';
					nTurun++;
					sbj.style.top = nTurun + 'px';
					if(nTurun >= 180){
						sbj.style.top = '180px';
						sbj.style.left = '';
						nKiri++;
						sbj.style.right = nKiri + 'px';
						if(nKiri >= 580) {
							sbj.style.right = '580px';
							sbj.style.top = '';
							nNaik++;
							sbj.style.bottom = nNaik + 'px';
							if(nNaik >= 180)  {
								nKanan = 0;nKiri = 0;nTurun = 0;nNaik =0;
								alert('putaran ke ' + jm++);
								jalan();
							}
						}
					}
				}
				if(jm === 5) {
					alert('udah ya capek');
				    clearInterval(animasi);
					area.style.display = 'block';
				}
			}
			
			var animasi = setInterval(mulai, 10);
		};

		area.addEventListener('click', jalan, false);
		
		
	</script>
</body>
</html>